<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人博客</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#6366F1',
            upload: '#38BDF8'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            DEFAULT: '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '4px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      min-height: 1024px;
      font-family: 'Inter', sans-serif;
    }

    .hero-section {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
      min-height: 800px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .hero-section::after {
      content: '';
      position: absolute;
      inset: 0;
    }

    .article-card {
      transform: translateY(0);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .article-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }

    @keyframes float {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    .animate-float {
      animation: float 3s ease-in-out infinite;
    }
  </style>
  <style>
    input[type="file"]::-webkit-file-upload-button {
      display: none;
    }

    input[type="file"]::file-selector-button {
      display: none;
    }
  </style>
</head>

<body class="bg-white text-gray-900">
  <nav class="fixed w-full bg-white shadow-lg z-50">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex justify-between items-center h-20">
        <div class="flex items-center gap-8">
          <a href="#" class="font-['Pacifico'] text-3xl text-primary hover:text-primary/90 transition-colors">logo</a>
          <div class="flex items-center gap-4">
            <a href="#"
              class="group flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-primary rounded-lg transition-all relative">
              <i class="fas fa-home text-lg"></i>
              <span>首页</span>
              <span
                class="absolute inset-x-0 -bottom-px h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
            </a>
            <div class="relative group">
              <button
                class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-primary rounded-lg transition-all">
                <i class="fas fa-book-open text-lg"></i>
                <span>文章专区</span>
                <i class="fas fa-chevron-down text-xs ml-1 transition-transform group-hover:rotate-180"></i>
              </button>
              <div
                class="absolute top-full left-0 mt-1 w-64 bg-white rounded-xl shadow-xl border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all py-3">
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary">
                    <i class="fas fa-fire text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">热门文章</p>
                    <p class="text-xs text-gray-400">精选高质量技术文章</p>
                  </div>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary">
                    <i class="fas fa-star text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">最新发布</p>
                    <p class="text-xs text-gray-400">实时更新的技术动态</p>
                  </div>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-green-500/10 text-green-500">
                    <i class="fas fa-bookmark text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">我的收藏</p>
                    <p class="text-xs text-gray-400">收藏的精选内容</p>
                  </div>
                </a>
              </div>
            </div>
            <div class="relative group">
              <button
                class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-primary rounded-lg transition-all">
                <i class="fas fa-th text-lg"></i>
                <span>资源中心</span>
                <i class="fas fa-chevron-down text-xs ml-1 transition-transform group-hover:rotate-180"></i>
              </button>
              <div
                class="absolute top-full left-0 mt-1 w-64 bg-white rounded-xl shadow-xl border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all py-3">
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-500/10 text-blue-500">
                    <i class="fas fa-code text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">代码仓库</p>
                    <p class="text-xs text-gray-400">优质开源项目分享</p>
                  </div>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-purple-500/10 text-purple-500">
                    <i class="fas fa-paint-brush text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">设计资源</p>
                    <p class="text-xs text-gray-400">UI/UX 设计素材</p>
                  </div>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-orange-500/10 text-orange-500">
                    <i class="fas fa-tools text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">效率工具</p>
                    <p class="text-xs text-gray-400">提升开发效率神器</p>
                  </div>
                </a>
              </div>
            </div>
            <div class="relative group">
              <button
                class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-primary rounded-lg transition-all">
                <i class="fas fa-graduation-cap text-lg"></i>
                <span>学习提升</span>
                <i class="fas fa-chevron-down text-xs ml-1 transition-transform group-hover:rotate-180"></i>
              </button>
              <div
                class="absolute top-full left-0 mt-1 w-64 bg-white rounded-xl shadow-xl border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all py-3">
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary">
                    <i class="fas fa-chalkboard-teacher text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">精品课程</p>
                    <p class="text-xs text-gray-400">系统化的技能提升</p>
                  </div>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-teal-500/10 text-teal-500">
                    <i class="fas fa-road text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">学习路线</p>
                    <p class="text-xs text-gray-400">职业成长指导</p>
                  </div>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-500/10 text-indigo-500">
                    <i class="fas fa-users text-sm"></i>
                  </span>
                  <div>
                    <p class="font-medium">技术社区</p>
                    <p class="text-xs text-gray-400">交流分享成长</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-center gap-6">
          <div class="relative">
            <input type="text" placeholder="搜索文章、课程、资源..."
              class="w-64 pl-12 pr-4 py-2.5 bg-gray-50 rounded-xl border-none focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all text-sm">
            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>
          <div class="flex items-center gap-3">
            <button
              class="bg-primary/10 text-primary hover:bg-primary/20 px-4 py-2 !rounded-xl transition-colors whitespace-nowrap">
              <i class="fas fa-bell text-lg"></i>
            </button>
            <button
              class="flex items-center gap-2 bg-primary text-white px-5 py-2 !rounded-xl hover:bg-primary/90 transition-colors whitespace-nowrap font-medium">
              <i class="fas fa-pencil-alt"></i>
              写文章
            </button>
          </div>
          <div class="relative group">
            <button class="flex items-center gap-3">
              <img src="https://ai-public.mastergo.com/ai/img_res/650947139345270df47735e4547f34c5.jpg" alt="用户头像"
                class="w-10 h-10 rounded-xl ring-2 ring-primary/20">
              <i class="fas fa-chevron-down text-xs text-gray-400 transition-transform group-hover:rotate-180"></i>
            </button>
            <div
              class="absolute top-full right-0 mt-1 w-64 bg-white rounded-xl shadow-xl border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all py-3">
              <div class="px-4 py-2 border-b border-gray-100">
                <div class="flex items-center gap-3 mb-2">
                  <img src="https://ai-public.mastergo.com/ai/img_res/fb169420bd573d8f2f4bdfce9434266f.jpg" alt="用户头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-primary/20">
                  <div>
                    <h4 class="font-semibold text-gray-900">陈思远</h4>
                    <p class="text-xs text-gray-500">全栈开发工程师</p>
                  </div>
                </div>
                <div class="flex items-center gap-2 mt-3">
                  <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">技术专家</span>
                  <span class="px-2 py-1 bg-green-500/10 text-green-500 text-xs rounded-full">活跃作者</span>
                </div>
              </div>
              <div class="py-2">
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary">
                    <i class="fas fa-user text-sm"></i>
                  </span>
                  <span>个人中心</span>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-primary hover:bg-primary/5 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-green-500/10 text-green-500">
                    <i class="fas fa-cog text-sm"></i>
                  </span>
                  <span>设置</span>
                </a>
                <a href="#"
                  class="flex items-center gap-3 px-4 py-2 text-gray-600 hover:text-red-500 hover:bg-red-50 transition-colors">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-red-500/10 text-red-500">
                    <i class="fas fa-sign-out-alt text-sm"></i>
                  </span>
                  <span>退出登录</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <main class="pt-16">
    <div class="fixed bottom-6 right-6 z-50 flex flex-col gap-3">
      <button
        class="opacity-60 hover:opacity-100 transition-opacity duration-300 bg-primary text-white w-10 h-10 rounded-full shadow-lg hover:bg-primary/90 flex items-center justify-center">
        <i class="fas fa-arrow-up text-sm"></i>
      </button>
      <button
        class="opacity-60 hover:opacity-100 transition-opacity duration-300 bg-primary/10 text-primary w-10 h-10 rounded-full shadow-lg hover:bg-primary/20 flex items-center justify-center">
        <i class="fas fa-comment text-sm"></i>
      </button>
      <button
        class="opacity-60 hover:opacity-100 transition-opacity duration-300 bg-primary/10 text-primary w-10 h-10 rounded-full shadow-lg hover:bg-primary/20 flex items-center justify-center">
        <i class="fas fa-qrcode text-sm"></i>
      </button>
      <button
        class="opacity-60 hover:opacity-100 transition-opacity duration-300 bg-primary/10 text-primary w-10 h-10 rounded-full shadow-lg hover:bg-primary/20 flex items-center justify-center">
        <i class="fas fa-moon text-sm"></i>
      </button>
    </div>
    <section class="relative min-h-[800px] overflow-hidden">
      <div
        class="absolute inset-0 bg-[url('https://ai-public.mastergo.com/ai/img_res/d03d463251a06b5919191bf5a3eefe8f.jpg')] bg-cover bg-center">
      </div>
      <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent backdrop-blur-sm"></div>
      <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between min-h-[800px]">
          <div class="max-w-2xl relative z-10">
            <div class="animate__animated animate__fadeInDown">
              <div class="relative inline-block mb-8 group">
                <span
                  class="inline-flex items-center px-6 py-2 bg-white/10 backdrop-blur-md border border-white/20 text-white rounded-full text-sm font-medium">
                  <span class="flex items-center justify-center w-5 h-5 bg-primary rounded-full mr-2">
                    <i class="fas fa-code text-xs text-white"></i>
                  </span>
                  技术探索者 · 创意实践家
                  <span class="flex items-center justify-center w-5 h-5 bg-secondary rounded-full ml-2">
                    <i class="fas fa-paint-brush text-xs text-white"></i>
                  </span>
                </span>
                <div
                  class="absolute -inset-1 bg-gradient-to-r from-primary to-secondary rounded-full blur opacity-30 group-hover:opacity-50 transition-all duration-500 -z-10 animate-pulse">
                </div>
              </div>
              <h1 class="text-8xl font-extrabold mb-8 leading-tight">
                <div class="overflow-hidden">
                  <span
                    class="block mb-4 text-white animate__animated animate__fadeInUp animate__delay-1s text-shadow-lg">创造数字未来</span>
                </div>
                <div class="overflow-hidden">
                  <span
                    class="block bg-gradient-to-r from-primary via-secondary to-purple-500 bg-clip-text text-transparent animate__animated animate__fadeInUp animate__delay-2s font-black">用代码诠释美学</span>
                </div>
              </h1>
              <p
                class="text-xl text-gray-200 mb-12 leading-relaxed max-w-xl animate__animated animate__fadeInUp animate__delay-3s font-light">
                作为一名全栈开发者和设计爱好者，我致力于将技术与创意完美融合，打造卓越的数字体验。在这里，让我们一起探索技术的无限可能。</p>
            </div>
            <div class="flex flex-wrap items-center gap-6 animate__animated animate__fadeInUp animate__delay-4s">
              <button
                class="group relative overflow-hidden bg-white/10 backdrop-blur-md border border-white/20 text-white px-10 py-4 !rounded-xl font-medium flex items-center transition-all duration-300 hover:bg-white/20">
                <span
                  class="absolute inset-0 bg-gradient-to-r from-primary to-secondary opacity-0 transition-opacity duration-300 group-hover:opacity-20"></span>
                <span
                  class="absolute -inset-full h-full w-1/2 z-5 block transform -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-40 group-hover:animate-shine"></span>
                <i class="fas fa-rocket mr-3 relative z-10 group-hover:translate-x-1 transition-transform"></i>
                <span class="relative z-10">探索作品</span>
              </button>
              <style>
                @keyframes shine {
                  from {
                    transform: translateX(-100%) skew(-12deg);
                  }

                  to {
                    transform: translateX(150%) skew(-12deg);
                  }
                }

                .animate-shine {
                  animation: shine 1.5s ease-in-out infinite;
                }
              </style>
              <button
                class="group relative overflow-hidden bg-transparent text-white px-10 py-4 !rounded-xl border border-white/20 font-medium flex items-center transition-all duration-300 hover:bg-white/10 backdrop-blur-md">
                <span
                  class="absolute inset-0 bg-gradient-to-r from-primary to-secondary opacity-0 transition-opacity duration-300 group-hover:opacity-20"></span>
                <i class="fas fa-user mr-3 relative z-10 group-hover:rotate-12 transition-transform"></i>
                <span class="relative z-10">了解更多</span>
              </button>
              <div class="flex items-center gap-6 ml-4">
                <a href="#"
                  class="group relative w-12 h-12 flex items-center justify-center rounded-full bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition-all duration-300">
                  <i class="fab fa-github text-xl text-white group-hover:scale-110 transition-transform"></i>
                </a>
                <a href="#"
                  class="group relative w-12 h-12 flex items-center justify-center rounded-full bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition-all duration-300">
                  <i class="fab fa-twitter text-xl text-white group-hover:scale-110 transition-transform"></i>
                </a>
                <a href="#"
                  class="group relative w-12 h-12 flex items-center justify-center rounded-full bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition-all duration-300">
                  <i class="fab fa-linkedin text-xl text-white group-hover:scale-110 transition-transform"></i>
                </a>
              </div>
            </div>
            <div class="mt-16 grid grid-cols-3 gap-8 animate__animated animate__fadeInUp animate__delay-5s">
              <div
                class="group relative bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl hover:bg-white/20 transition-all duration-300">
                <div
                  class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-300">
                </div>
                <div class="relative">
                  <div class="flex items-center justify-between mb-4">
                    <span class="flex items-center justify-center w-12 h-12 bg-primary/30 backdrop-blur-md rounded-xl">
                      <i class="fas fa-code text-white text-xl"></i>
                    </span>
                    <span class="text-3xl font-bold text-white">5年+</span>
                  </div>
                  <span class="text-gray-200 font-medium">开发经验</span>
                </div>
              </div>
              <div
                class="group relative bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
                <div
                  class="absolute inset-0 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-2xl transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-300">
                </div>
                <div class="relative">
                  <div class="flex items-center justify-between mb-4">
                    <span class="flex items-center justify-center w-12 h-12 bg-secondary/10 rounded-xl">
                      <i class="fas fa-project-diagram text-secondary text-xl"></i>
                    </span>
                    <span class="text-3xl font-bold text-gray-900">50+</span>
                  </div>
                  <span class="text-gray-600 font-medium">项目经验</span>
                </div>
              </div>
              <div
                class="group relative bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
                <div
                  class="absolute inset-0 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-2xl transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-300">
                </div>
                <div class="relative">
                  <div class="flex items-center justify-between mb-4">
                    <span class="flex items-center justify-center w-12 h-12 bg-green-100 rounded-xl">
                      <i class="fas fa-pen text-green-500 text-xl"></i>
                    </span>
                    <span class="text-3xl font-bold text-gray-900">100+</span>
                  </div>
                  <span class="text-gray-600 font-medium">技术文章</span>
                </div>
              </div>
            </div>
          </div>
          <div class="hidden lg:block relative w-1/3">
            <div class="absolute -top-32 right-0">
              <div class="relative w-[600px] h-[600px] animate-float">
                <div
                  class="absolute inset-0 bg-gradient-to-r from-primary/30 to-secondary/30 rounded-full blur-[100px]">
                </div>
                <div
                  class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full blur-[50px] animate-pulse">
                </div>
                <img src="https://ai-public.mastergo.com/ai/img_res/d08b0c636ba43ff1c76beb2a8a651410.jpg"
                  alt="Hero Illustration"
                  class="w-full h-full object-cover rounded-3xl border border-white/20 backdrop-blur-sm hover:border-primary/50 transition-all duration-500">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    </div>
    </div>
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
      <div
        class="animate-bounce flex flex-col items-center cursor-pointer hover:text-primary transition-colors duration-300">
        <span class="text-sm font-medium mb-2">继续探索</span>
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
    </section>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
      <div class="text-center max-w-3xl mx-auto mb-16">
        <span class="text-primary font-medium tracking-wider">EXPLORE & DISCOVER</span>
        <h2 class="text-4xl font-bold text-gray-900 mt-3 mb-6">探索无限可能的技术世界</h2>
        <p class="text-lg text-gray-600">在这里，我们将共同探索前沿技术，分享创新设计，追求卓越效率，收获成长经验</p>
      </div>
      <div class="grid grid-cols-4 gap-8">
        <div
          class="group relative bg-gradient-to-b from-white to-gray-50 rounded-2xl p-8 hover:shadow-2xl transition-all duration-500 overflow-hidden">
          <div
            class="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
          </div>
          <img src="https://ai-public.mastergo.com/ai/img_res/5e3888d0aae1cdfd1270706ef05e97fa.jpg" alt="技术开发"
            class="w-full h-40 object-cover rounded-xl mb-6 transform group-hover:scale-105 transition-transform duration-500">
          <div class="relative">
            <h3 class="text-xl font-bold text-gray-900 mb-3">技术开发</h3>
            <p class="text-gray-600 mb-4 text-sm">探索前沿技术趋势，分享开发实践经验，深入理解技术本质</p>
            <div class="flex items-center justify-between text-sm">
              <div class="flex items-center space-x-2">
                <span class="flex items-center text-primary"><i class="fas fa-book-open mr-2"></i>24 文章</span>
                <span class="flex items-center text-primary"><i class="fas fa-video mr-2"></i>12 教程</span>
              </div>
              <button
                class="opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300 text-primary hover:text-primary/80">
                <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
        <div
          class="group relative bg-gradient-to-b from-white to-gray-50 rounded-2xl p-8 hover:shadow-2xl transition-all duration-500 overflow-hidden">
          <div
            class="absolute inset-0 bg-gradient-to-br from-secondary/5 to-secondary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
          </div>
          <img src="https://ai-public.mastergo.com/ai/img_res/b58f35eb68549414ce0fd5da75c96b4e.jpg" alt="设计创意"
            class="w-full h-40 object-cover rounded-xl mb-6 transform group-hover:scale-105 transition-transform duration-500">
          <div class="relative">
            <h3 class="text-xl font-bold text-gray-900 mb-3">设计创意</h3>
            <p class="text-gray-600 mb-4 text-sm">探索设计趋势与理念，打造卓越用户体验，提升产品价值</p>
            <div class="flex items-center justify-between text-sm">
              <div class="flex items-center space-x-2">
                <span class="flex items-center text-secondary"><i class="fas fa-book-open mr-2"></i>18 文章</span>
                <span class="flex items-center text-secondary"><i class="fas fa-palette mr-2"></i>8 资源</span>
              </div>
              <button
                class="opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300 text-secondary hover:text-secondary/80">
                <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
        <div
          class="group relative bg-gradient-to-b from-white to-gray-50 rounded-2xl p-8 hover:shadow-2xl transition-all duration-500 overflow-hidden">
          <div
            class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-green-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
          </div>
          <img src="https://ai-public.mastergo.com/ai/img_res/c7cf27dbac6a0b2df80f9a87a8dc4a16.jpg" alt="效率提升"
            class="w-full h-40 object-cover rounded-xl mb-6 transform group-hover:scale-105 transition-transform duration-500">
          <div class="relative">
            <h3 class="text-xl font-bold text-gray-900 mb-3">效率提升</h3>
            <p class="text-gray-600 mb-4 text-sm">优化工作流程，推荐高效工具，提升团队协作效率</p>
            <div class="flex items-center justify-between text-sm">
              <div class="flex items-center space-x-2">
                <span class="flex items-center text-green-500"><i class="fas fa-book-open mr-2"></i>16 文章</span>
                <span class="flex items-center text-green-500"><i class="fas fa-tools mr-2"></i>6 工具</span>
              </div>
              <button
                class="opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300 text-green-500 hover:text-green-600">
                <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
        <div
          class="group relative bg-gradient-to-b from-white to-gray-50 rounded-2xl p-8 hover:shadow-2xl transition-all duration-500 overflow-hidden">
          <div
            class="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-orange-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
          </div>
          <img src="https://ai-public.mastergo.com/ai/img_res/0ba47fc97e649dc8363292cca3f5387f.jpg" alt="经验分享"
            class="w-full h-40 object-cover rounded-xl mb-6 transform group-hover:scale-105 transition-transform duration-500">
          <div class="relative">
            <h3 class="text-xl font-bold text-gray-900 mb-3">经验分享</h3>
            <p class="text-gray-600 mb-4 text-sm">分享职业成长心得，探讨技术管理经验，助力团队发展</p>
            <div class="flex items-center justify-between text-sm">
              <div class="flex items-center space-x-2">
                <span class="flex items-center text-orange-500"><i class="fas fa-book-open mr-2"></i>14 文章</span>
                <span class="flex items-center text-orange-500"><i class="fas fa-comments mr-2"></i>4 讨论</span>
              </div>
              <button
                class="opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300 text-orange-500 hover:text-orange-600">
                <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="py-16 bg-gradient-to-b from-white to-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-12">
          <span class="text-primary font-medium">ONLINE COURSES</span>
          <h2 class="text-3xl font-bold text-gray-900 mt-2 mb-4">精选好课</h2>
          <p class="text-gray-400">为你精心挑选优质课程，助你加速成长</p>
        </div>
        <div class="grid grid-cols-3 gap-8">
          <div
            class="group bg-white rounded-3xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500">
            <div class="relative h-[280px] overflow-hidden">
              <img src="https://ai-public.mastergo.com/ai/img_res/db38230b0bb22bf3232b6ae4e3a2aa84.jpg" alt="课程封面"
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute top-6 left-6 flex items-center gap-3">
                <span
                  class="px-4 py-1.5 bg-white/10 backdrop-blur-md text-white text-sm rounded-full border border-white/20 flex items-center gap-2">
                  <i class="fas fa-crown text-yellow-400"></i>
                  进阶课程
                </span>
                <span
                  class="flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/20">
                  <i class="fas fa-star text-yellow-400"></i>
                  <span class="text-white text-sm font-medium">4.9</span>
                </span>
              </div>
              <div class="absolute bottom-0 left-0 right-0 p-8">
                <div class="flex items-start gap-6">
                  <div class="flex-1">
                    <h3 class="text-2xl font-bold text-white mb-3 group-hover:text-primary transition-colors">React
                      高级开发实战</h3>
                    <p class="text-gray-200 text-base line-clamp-2">深入掌握 React 18 新特性与性能优化，打造企业级高质量应用</p>
                    <div class="flex items-center gap-6 mt-4">
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-book-open mr-2"></i>
                        <span>42 课时</span>
                      </span>
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-users mr-2"></i>
                        <span>1,268 学员</span>
                      </span>
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-clock mr-2"></i>
                        <span>32 小时</span>
                      </span>
                    </div>
                  </div>
                  <div class="flex flex-col items-end justify-between">
                    <span
                      class="flex items-center justify-center w-14 h-14 bg-white/10 backdrop-blur-md text-white rounded-2xl border border-white/20">
                      <i class="fab fa-react text-3xl"></i>
                    </span>
                    <div class="text-right mt-4">
                      <div class="flex items-center gap-2 mb-2">
                        <span class="text-gray-400 text-base line-through">¥599</span>
                        <span class="text-3xl font-bold text-white">¥399</span>
                      </div>
                      <button
                        class="bg-primary hover:bg-primary/90 text-white px-8 py-3 !rounded-xl transition-all font-medium flex items-center gap-2">
                        立即学习
                        <i class="fas fa-arrow-right text-sm opacity-80"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-8">
              <div class="grid grid-cols-3 gap-6">
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-primary/10 text-primary">
                      <i class="fas fa-graduation-cap text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">课程难度</span>
                  </div>
                  <p class="text-gray-600">适合具备 React 基础的开发者</p>
                </div>
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-green-500/10 text-green-500">
                      <i class="fas fa-check text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">学习目标</span>
                  </div>
                  <p class="text-gray-600">掌握 React 高级开发技能</p>
                </div>
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-blue-500/10 text-blue-500">
                      <i class="fas fa-certificate text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">就业提升</span>
                  </div>
                  <p class="text-gray-600">高级前端开发工程师</p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="group bg-white rounded-3xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500">
            <div class="relative h-[280px] overflow-hidden">
              <img src="https://ai-public.mastergo.com/ai/img_res/8802dc9f6d2bfc60040d13ee744cc2ed.jpg" alt="课程封面"
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute top-6 left-6 flex items-center gap-3">
                <span
                  class="px-4 py-1.5 bg-white/10 backdrop-blur-md text-white text-sm rounded-full border border-white/20 flex items-center gap-2">
                  <i class="fas fa-sparkles text-yellow-400"></i>
                  入门课程
                </span>
                <span
                  class="flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/20">
                  <i class="fas fa-star text-yellow-400"></i>
                  <span class="text-white text-sm font-medium">4.8</span>
                </span>
              </div>
              <div class="absolute bottom-0 left-0 right-0 p-8">
                <div class="flex items-start gap-6">
                  <div class="flex-1">
                    <h3 class="text-2xl font-bold text-white mb-3 group-hover:text-secondary transition-colors">UI
                      设计入门实战</h3>
                    <p class="text-gray-200 text-base line-clamp-2">从零基础开始，系统掌握UI设计方法论与行业实践经验</p>
                    <div class="flex items-center gap-6 mt-4">
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-book-open mr-2"></i>
                        <span>48 课时</span>
                      </span>
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-users mr-2"></i>
                        <span>986 学员</span>
                      </span>
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-clock mr-2"></i>
                        <span>36 小时</span>
                      </span>
                    </div>
                  </div>
                  <div class="flex flex-col items-end justify-between">
                    <span
                      class="flex items-center justify-center w-14 h-14 bg-white/10 backdrop-blur-md text-white rounded-2xl border border-white/20">
                      <i class="fas fa-bezier-curve text-3xl"></i>
                    </span>
                    <div class="text-right mt-4">
                      <div class="flex items-center gap-2 mb-2">
                        <span class="text-gray-400 text-base line-through">¥459</span>
                        <span class="text-3xl font-bold text-white">¥299</span>
                      </div>
                      <button
                        class="bg-secondary hover:bg-secondary/90 text-white px-8 py-3 !rounded-xl transition-all font-medium flex items-center gap-2">
                        立即学习
                        <i class="fas fa-arrow-right text-sm opacity-80"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-8">
              <div class="grid grid-cols-3 gap-6">
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-secondary/10 text-secondary">
                      <i class="fas fa-graduation-cap text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">课程难度</span>
                  </div>
                  <p class="text-gray-600">零基础也能轻松入门</p>
                </div>
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-green-500/10 text-green-500">
                      <i class="fas fa-check text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">学习目标</span>
                  </div>
                  <p class="text-gray-600">掌握UI设计核心技能</p>
                </div>
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-blue-500/10 text-blue-500">
                      <i class="fas fa-certificate text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">就业提升</span>
                  </div>
                  <p class="text-gray-600">初级UI设计师岗位</p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="group bg-white rounded-3xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500">
            <div class="relative h-[280px] overflow-hidden">
              <img src="https://ai-public.mastergo.com/ai/img_res/3e0db1ce67107a7cb535bad733d206db.jpg" alt="课程封面"
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute top-6 left-6 flex items-center gap-3">
                <span
                  class="px-4 py-1.5 bg-white/10 backdrop-blur-md text-white text-sm rounded-full border border-white/20 flex items-center gap-2">
                  <i class="fas fa-rocket text-yellow-400"></i>
                  实战课程
                </span>
                <span
                  class="flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/20">
                  <i class="fas fa-star text-yellow-400"></i>
                  <span class="text-white text-sm font-medium">4.7</span>
                </span>
              </div>
              <div class="absolute bottom-0 left-0 right-0 p-8">
                <div class="flex items-start gap-6">
                  <div class="flex-1">
                    <h3 class="text-2xl font-bold text-white mb-3 group-hover:text-green-500 transition-colors">效率提升实战营
                    </h3>
                    <p class="text-gray-200 text-base line-clamp-2">系统化提升个人与团队工作效率，打造高效生产力系统</p>
                    <div class="flex items-center gap-6 mt-4">
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-book-open mr-2"></i>
                        <span>24 课时</span>
                      </span>
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-users mr-2"></i>
                        <span>742 学员</span>
                      </span>
                      <span class="flex items-center text-white/80">
                        <i class="fas fa-clock mr-2"></i>
                        <span>18 小时</span>
                      </span>
                    </div>
                  </div>
                  <div class="flex flex-col items-end justify-between">
                    <span
                      class="flex items-center justify-center w-14 h-14 bg-white/10 backdrop-blur-md text-white rounded-2xl border border-white/20">
                      <i class="fas fa-rocket text-3xl"></i>
                    </span>
                    <div class="text-right mt-4">
                      <div class="flex items-center gap-2 mb-2">
                        <span class="text-gray-400 text-base line-through">¥399</span>
                        <span class="text-3xl font-bold text-white">¥259</span>
                      </div>
                      <button
                        class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 !rounded-xl transition-all font-medium flex items-center gap-2">
                        立即学习
                        <i class="fas fa-arrow-right text-sm opacity-80"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-8">
              <div class="grid grid-cols-3 gap-6">
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-green-500/10 text-green-500">
                      <i class="fas fa-graduation-cap text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">课程难度</span>
                  </div>
                  <p class="text-gray-600">适合所有追求效率者</p>
                </div>
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-green-500/10 text-green-500">
                      <i class="fas fa-check text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">学习目标</span>
                  </div>
                  <p class="text-gray-600">构建个人效率体系</p>
                </div>
                <div class="bg-gray-50 rounded-2xl p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-green-500/10 text-green-500">
                      <i class="fas fa-certificate text-lg"></i>
                    </span>
                    <span class="font-medium text-gray-900">工作提升</span>
                  </div>
                  <p class="text-gray-600">效率提升300%</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="py-24 bg-gradient-to-br from-gray-50 via-white to-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <div class="inline-flex items-center justify-center p-1 bg-primary/5 rounded-2xl mb-4">
            <span class="px-6 py-2 bg-primary text-white text-sm font-medium rounded-xl">TECH COMMUNITY</span>
          </div>
          <h2
            class="text-5xl font-bold text-gray-900 mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary via-secondary to-purple-500">
            技术社区</h2>
          <div class="flex flex-col items-center gap-4">
            <p class="text-xl text-gray-600 leading-relaxed max-w-2xl">汇聚开发者的智慧，分享技术的力量。在这里，让我们共同探索和成长。</p>
            <div class="flex items-center gap-3 text-gray-400">
              <span class="flex items-center gap-1"><i class="fas fa-users"></i>3.2k+ 活跃用户</span>
              <span class="w-1 h-1 rounded-full bg-gray-300"></span>
              <span class="flex items-center gap-1"><i class="fas fa-comments"></i>12k+ 技术讨论</span>
              <span class="w-1 h-1 rounded-full bg-gray-300"></span>
              <span class="flex items-center gap-1"><i class="fas fa-book"></i>5k+ 原创文章</span>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-12 gap-8">
          <div class="col-span-12 lg:col-span-8">
            <div class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden">
              <div class="flex items-center justify-between p-6 bg-gradient-to-r from-primary/5 to-transparent">
                <div class="flex items-center gap-4">
                  <span class="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10">
                    <i class="fas fa-rocket text-primary text-xl"></i>
                  </span>
                  <div>
                    <h3 class="text-xl font-bold text-gray-900">技术动态</h3>
                    <p class="text-gray-500">实时更新的技术讨论</p>
                  </div>
                </div>
                <div class="flex items-center gap-4">
                  <div class="flex items-center gap-6 text-sm text-gray-500">
                    <span class="flex items-center gap-2">
                      <i class="fas fa-fire text-orange-500"></i>
                      今日新增 36 讨论
                    </span>
                    <span class="flex items-center gap-2">
                      <i class="fas fa-users text-green-500"></i>
                      当前在线 128 人
                    </span>
                  </div>
                  <button
                    class="px-4 py-2 !rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors whitespace-nowrap">发布讨论</button>
                </div>
              </div>
              <div class="divide-y divide-gray-100">
                <div class="p-6 hover:bg-gray-50 transition-colors">
                  <div class="flex gap-6">
                    <img src="https://ai-public.mastergo.com/ai/img_res/08fe4d7f81608a6f0bb08043052d696f.jpg" alt="用户头像"
                      class="w-12 h-12 rounded-xl ring-2 ring-primary/20">
                    <div class="flex-1">
                      <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-3">
                          <h4 class="font-bold text-gray-900">赵明辉</h4>
                          <div class="flex items-center gap-2">
                            <span
                              class="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full">技术专家</span>
                            <span class="px-2 py-0.5 text-xs text-gray-500 bg-gray-100 rounded-full">15分钟前</span>
                          </div>
                        </div>
                        <button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-h"></i></button>
                      </div>
                      <p class="text-gray-800 mb-4">分享一下我们团队在大型 React 项目中的状态管理实践，包括如何选择合适的状态管理方案、数据流设计、性能优化等方面的经验。</p>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-6">
                          <button class="flex items-center gap-2 text-gray-500 hover:text-primary transition-colors">
                            <i class="far fa-comment text-lg"></i>
                            <span>48 评论</span>
                          </button>
                          <button class="flex items-center gap-2 text-gray-500 hover:text-rose-500 transition-colors">
                            <i class="far fa-heart text-lg"></i>
                            <span>156 喜欢</span>
                          </button>
                          <button class="flex items-center gap-2 text-gray-500 hover:text-blue-500 transition-colors">
                            <i class="far fa-bookmark text-lg"></i>
                            <span>收藏</span>
                          </button>
                        </div>
                        <div class="flex items-center gap-2">
                          <span class="px-3 py-1 bg-blue-50 text-blue-500 rounded-full text-sm">React</span>
                          <span class="px-3 py-1 bg-green-50 text-green-500 rounded-full text-sm">状态管理</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="p-6 hover:bg-gray-50 transition-colors">
                  <div class="flex gap-6">
                    <img src="https://ai-public.mastergo.com/ai/img_res/fddbe4380fcc63f014d2c7e6c22b936f.jpg" alt="用户头像"
                      class="w-12 h-12 rounded-xl ring-2 ring-primary/20">
                    <div class="flex-1">
                      <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-3">
                          <h4 class="font-bold text-gray-900">李雨晴</h4>
                          <div class="flex items-center gap-2">
                            <span
                              class="px-2 py-0.5 text-xs font-medium bg-purple-100 text-purple-500 rounded-full">设计师</span>
                            <span class="px-2 py-0.5 text-xs text-gray-500 bg-gray-100 rounded-full">2小时前</span>
                          </div>
                        </div>
                        <button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-h"></i></button>
                      </div>
                      <p class="text-gray-800 mb-4">刚完成了一个组件库的设计系统，重点解决了主题定制、组件复用、设计规范统一等问题，欢迎交流讨论。</p>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-6">
                          <button class="flex items-center gap-2 text-gray-500 hover:text-primary transition-colors">
                            <i class="far fa-comment text-lg"></i>
                            <span>36 评论</span>
                          </button>
                          <button class="flex items-center gap-2 text-gray-500 hover:text-rose-500 transition-colors">
                            <i class="far fa-heart text-lg"></i>
                            <span>128 喜欢</span>
                          </button>
                          <button class="flex items-center gap-2 text-gray-500 hover:text-blue-500 transition-colors">
                            <i class="far fa-bookmark text-lg"></i>
                            <span>收藏</span>
                          </button>
                        </div>
                        <div class="flex items-center gap-2">
                          <span class="px-3 py-1 bg-purple-50 text-purple-500 rounded-full text-sm">UI/UX</span>
                          <span class="px-3 py-1 bg-pink-50 text-pink-500 rounded-full text-sm">设计系统</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="p-6 hover:bg-gray-50 transition-colors">
                  <div class="flex gap-6">
                    <img src="https://ai-public.mastergo.com/ai/img_res/5540dcc7dbb5364d2edc4d18792867d9.jpg" alt="用户头像"
                      class="w-12 h-12 rounded-xl ring-2 ring-primary/20">
                    <div class="flex-1">
                      <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-3">
                          <h4 class="font-bold text-gray-900">王建国</h4>
                          <div class="flex items-center gap-2">
                            <span
                              class="px-2 py-0.5 text-xs font-medium bg-green-100 text-green-500 rounded-full">架构师</span>
                            <span class="px-2 py-0.5 text-xs text-gray-500 bg-gray-100 rounded-full">4小时前</span>
                          </div>
                        </div>
                        <button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-h"></i></button>
                      </div>
                      <p class="text-gray-800 mb-4">整理了一份微服务架构实践指南，包含服务拆分、通信方案、监控告警等多个维度，希望能帮助到大家。</p>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-6">
                          <button class="flex items-center gap-2 text-gray-500 hover:text-primary transition-colors">
                            <i class="far fa-comment text-lg"></i>
                            <span>42 评论</span>
                          </button>
                          <button class="flex items-center gap-2 text-gray-500 hover:text-rose-500 transition-colors">
                            <i class="far fa-heart text-lg"></i>
                            <span>142 喜欢</span>
                          </button>
                          <button class="flex items-center gap-2 text-gray-500 hover:text-blue-500 transition-colors">
                            <i class="far fa-bookmark text-lg"></i>
                            <span>收藏</span>
                          </button>
                        </div>
                        <div class="flex items-center gap-2">
                          <span class="px-3 py-1 bg-orange-50 text-orange-500 rounded-full text-sm">架构</span>
                          <span class="px-3 py-1 bg-blue-50 text-blue-500 rounded-full text-sm">微服务</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-4 space-y-8">
            <div class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden">
              <div class="p-6 bg-gradient-to-r from-secondary/5 to-transparent">
                <div class="flex items-center gap-4 mb-6">
                  <span class="flex items-center justify-center w-12 h-12 rounded-xl bg-secondary/10">
                    <i class="fas fa-fire text-secondary text-xl"></i>
                  </span>
                  <div>
                    <h3 class="text-xl font-bold text-gray-900">热门话题</h3>
                    <p class="text-gray-500">最受关注的技术讨论</p>
                  </div>
                </div>
                <div class="space-y-6">
                  <div class="group">
                    <div class="flex items-center gap-4">
                      <span
                        class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary text-white font-bold">1</span>
                      <div class="flex-1">
                        <h4 class="font-medium text-gray-900 group-hover:text-primary transition-colors">WebAssembly
                          在前端的应用场景</h4>
                        <div class="flex items-center gap-4 mt-1">
                          <span class="text-sm text-gray-500">2.8k 浏览</span>
                          <span class="text-sm text-gray-500">186 评论</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="group">
                    <div class="flex items-center gap-4">
                      <span
                        class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 text-gray-900 font-bold">2</span>
                      <div class="flex-1">
                        <h4 class="font-medium text-gray-900 group-hover:text-primary transition-colors">微前端架构实践与性能优化
                        </h4>
                        <div class="flex items-center gap-4 mt-1">
                          <span class="text-sm text-gray-500">2.4k 浏览</span>
                          <span class="text-sm text-gray-500">168 评论</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="group">
                    <div class="flex items-center gap-4">
                      <span
                        class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 text-gray-900 font-bold">3</span>
                      <div class="flex-1">
                        <h4 class="font-medium text-gray-900 group-hover:text-primary transition-colors">AI 驱动的前端开发工具链
                        </h4>
                        <div class="flex items-center gap-4 mt-1">
                          <span class="text-sm text-gray-500">2.2k 浏览</span>
                          <span class="text-sm text-gray-500">156 评论</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden">
              <div class="p-6">
                <div class="flex items-center gap-4 mb-6">
                  <span class="flex items-center justify-center w-12 h-12 rounded-xl bg-green-500/10">
                    <i class="fas fa-users text-green-500 text-xl"></i>
                  </span>
                  <div>
                    <h3 class="text-xl font-bold text-gray-900">推荐关注</h3>
                    <p class="text-gray-500">技术领域的活跃创作者</p>
                  </div>
                </div>
                <div class="space-y-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                      <img src="https://ai-public.mastergo.com/ai/img_res/4eff0190dbffd0a8a12793466a08ab3f.jpg"
                        alt="用户头像" class="w-12 h-12 rounded-xl ring-2 ring-green-500/20">
                      <div>
                        <h4 class="font-medium text-gray-900">张宇峰</h4>
                        <p class="text-sm text-gray-500">技术专家 @ 阿里巴巴</p>
                      </div>
                    </div>
                    <button
                      class="px-4 py-1 border border-primary text-primary hover:bg-primary hover:text-white !rounded-lg transition-colors text-sm">关注</button>
                  </div>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                      <img src="https://ai-public.mastergo.com/ai/img_res/6236ef3090de822dee9fb456a582cf1c.jpg"
                        alt="用户头像" class="w-12 h-12 rounded-xl ring-2 ring-green-500/20">
                      <div>
                        <h4 class="font-medium text-gray-900">刘艺萱</h4>
                        <p class="text-sm text-gray-500">资深设计师 @ 腾讯</p>
                      </div>
                    </div>
                    <button
                      class="px-4 py-1 border border-primary text-primary hover:bg-primary hover:text-white !rounded-lg transition-colors text-sm">关注</button>
                  </div>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                      <img src="https://ai-public.mastergo.com/ai/img_res/e7850a3c336353eff00e7993962da2b3.jpg"
                        alt="用户头像" class="w-12 h-12 rounded-xl ring-2 ring-green-500/20">
                      <div>
                        <h4 class="font-medium text-gray-900">陈宏达</h4>
                        <p class="text-sm text-gray-500">架构师 @ 字节跳动</p>
                      </div>
                    </div>
                    <button
                      class="px-4 py-1 border border-primary text-primary hover:bg-primary hover:text-white !rounded-lg transition-colors text-sm">关注</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
            <div class="relative bg-gradient-to-r from-primary/5 to-secondary/5 p-6">
              <div class="flex items-center justify-between mb-6">
                <div>
                  <div class="flex items-center gap-3 mb-2">
                    <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10">
                      <i class="fas fa-comments text-primary"></i>
                    </span>
                    <div>
                      <h3 class="text-xl font-bold text-gray-900">最新讨论</h3>
                      <p class="text-gray-500 text-sm">实时更新的技术话题</p>
                    </div>
                  </div>
                  <div class="flex items-center gap-4 mt-3">
                    <span class="flex items-center gap-1 text-sm text-gray-500">
                      <i class="fas fa-fire text-orange-500"></i>
                      今日新增 12 个话题
                    </span>
                    <span class="flex items-center gap-1 text-sm text-gray-500">
                      <i class="fas fa-users text-primary"></i>
                      在线讨论 28 人
                    </span>
                  </div>
                </div>
                <div class="flex flex-col items-end gap-2">
                  <a href="#" class="group flex items-center text-primary hover:text-primary/80 transition-colors">
                    <span class="mr-2">查看更多</span>
                    <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                  </a>
                  <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full">
                    5 分钟前更新
                  </span>
                </div>
              </div>
              <div class="space-y-4">
                <div class="group bg-white rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                  <div class="flex items-start gap-6">
                    <div class="relative">
                      <img src="https://ai-public.mastergo.com/ai/img_res/6a3cdee54cee8eb833c6097044092454.jpg"
                        alt="用户头像"
                        class="w-14 h-14 rounded-xl ring-2 ring-primary/10 group-hover:ring-primary/20 transition-all">
                      <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white">
                      </div>
                    </div>
                    <div class="flex-1">
                      <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center space-x-3">
                          <h4 class="text-lg font-bold text-gray-900">陈佳宁</h4>
                          <div class="flex items-center gap-2">
                            <span
                              class="px-3 py-1 text-sm text-white bg-primary/90 rounded-full flex items-center gap-1">
                              <i class="fas fa-award text-yellow-300"></i>活跃作者
                            </span>
                            <span class="px-2 py-0.5 text-xs text-gray-500 bg-gray-100 rounded-full">2小时前</span>
                          </div>
                        </div>
                        <button class="text-gray-400 hover:text-primary transition-colors">
                          <i class="fas fa-ellipsis-h"></i>
                        </button>
                      </div>
                      <p class="text-gray-700 leading-relaxed line-clamp-3 mb-4">关于Vue3的Composition
                        API，我总结了一些在大型项目中的最佳实践和代码组织方案，包括：1. 功能模块的拆分原则 2. 状态管理的优化方案 3. 性能优化的实践经验</p>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-6">
                          <button class="group flex items-center gap-2 text-gray-500 hover:text-primary transition-all">
                            <div
                              class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-50 group-hover:bg-primary/10 transition-colors">
                              <i class="far fa-comment"></i>
                            </div>
                            <span class="text-sm font-medium">24 回复</span>
                          </button>
                          <button
                            class="group flex items-center gap-2 text-gray-500 hover:text-pink-500 transition-all">
                            <div
                              class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-50 group-hover:bg-pink-500/10 transition-colors">
                              <i class="far fa-heart"></i>
                            </div>
                            <span class="text-sm font-medium">32 喜欢</span>
                          </button>
                          <button
                            class="group flex items-center gap-2 text-gray-500 hover:text-blue-500 transition-all">
                            <div
                              class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-50 group-hover:bg-blue-500/10 transition-colors">
                              <i class="far fa-bookmark"></i>
                            </div>
                            <span class="text-sm font-medium">收藏</span>
                          </button>
                        </div>
                        <div class="flex items-center gap-2">
                          <span
                            class="flex items-center gap-1 px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">
                            <i class="fab fa-vuejs text-sm"></i>
                            Vue.js
                          </span>
                          <span
                            class="flex items-center gap-1 px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">
                            <i class="fas fa-check-circle text-sm"></i>
                            最佳实践
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="group bg-white rounded-xl p-4 hover:shadow-lg transition-all duration-300">
              <div class="flex items-start gap-4">
                <img src="https://ai-public.mastergo.com/ai/img_res/0286e53b879496748d9f6a023f0dbd8a.jpg" alt="用户头像"
                  class="w-12 h-12 rounded-xl ring-2 ring-primary/10 group-hover:ring-primary/20 transition-all">
                <div class="flex-1">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                      <span class="font-semibold text-gray-900">张悦</span>
                      <span class="text-xs text-white bg-green-500/80 px-2 py-1 rounded-full">技术专家</span>
                    </div>
                    <span class="text-sm text-gray-500">4小时前</span>
                  </div>
                  <p class="text-gray-800 mt-2 mb-3 line-clamp-2">分享一套完整的移动端适配解决方案，包括：viewport 适配、rem 布局、媒体查询的最佳实践。另外还有
                    flex 布局在复杂场景下的应用技巧。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                      <button class="flex items-center space-x-1 text-gray-500 hover:text-primary transition-colors">
                        <i class="far fa-comment"></i>
                        <span class="text-sm">36 回复</span>
                      </button>
                      <button class="flex items-center space-x-1 text-gray-500 hover:text-primary transition-colors">
                        <i class="far fa-heart"></i>
                        <span class="text-sm">45 喜欢</span>
                      </button>
                    </div>
                    <div class="flex items-center space-x-2">
                      <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded-full">移动端</span>
                      <span class="text-xs text-secondary bg-secondary/10 px-2 py-1 rounded-full">CSS</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="group bg-white rounded-xl p-4 hover:shadow-lg transition-all duration-300">
              <div class="flex items-start gap-4">
                <img src="https://ai-public.mastergo.com/ai/img_res/794201ec5c4b5dd532b3057410fa7b65.jpg" alt="用户头像"
                  class="w-12 h-12 rounded-xl ring-2 ring-primary/10 group-hover:ring-primary/20 transition-all">
                <div class="flex-1">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                      <span class="font-semibold text-gray-900">李宏达</span>
                      <span class="text-xs text-white bg-orange-500/80 px-2 py-1 rounded-full">高级工程师</span>
                    </div>
                    <span class="text-sm text-gray-500">6小时前</span>
                  </div>
                  <p class="text-gray-800 mt-2 mb-3 line-clamp-2">整理了一份 VSCode 效率提升指南，包括：代码片段管理、Git
                    集成增强、代码重构工具、远程开发配置等多个方面的实用插件推荐。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                      <button class="flex items-center space-x-1 text-gray-500 hover:text-primary transition-colors">
                        <i class="far fa-comment"></i>
                        <span class="text-sm">18 回复</span>
                      </button>
                      <button class="flex items-center space-x-1 text-gray-500 hover:text-primary transition-colors">
                        <i class="far fa-heart"></i>
                        <span class="text-sm">28 喜欢</span>
                      </button>
                    </div>
                    <div class="flex items-center space-x-2">
                      <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded-full">工具</span>
                      <span class="text-xs text-secondary bg-secondary/10 px-2 py-1 rounded-full">效率</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300">
          <div class="bg-gradient-to-br from-green-500/5 to-teal-500/5 p-6">
            <div class="flex items-center justify-between mb-6">
              <div>
                <div class="flex items-center gap-3 mb-2">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-green-500/10">
                    <i class="fas fa-users text-green-500"></i>
                  </span>
                  <div>
                    <h3 class="text-xl font-bold text-gray-900">活跃成员</h3>
                    <p class="text-gray-500 text-sm">技术社区活跃贡献者</p>
                  </div>
                </div>
                <div class="flex items-center gap-4 mt-3">
                  <span class="flex items-center gap-1 text-sm text-gray-500">
                    <i class="fas fa-crown text-yellow-400"></i>
                    本月之星 TOP 5
                  </span>
                  <span class="flex items-center gap-1 text-sm text-gray-500">
                    <i class="fas fa-trophy text-green-500"></i>
                    技术领袖
                  </span>
                </div>
              </div>
              <div class="flex flex-col items-end gap-2">
                <a href="#" class="group flex items-center text-green-500 hover:text-green-600 transition-colors">
                  <span class="mr-2">查看全部</span>
                  <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                </a>
                <span class="px-3 py-1 bg-green-500/10 text-green-500 text-sm rounded-full">
                  活跃度排行
                </span>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div
                class="group bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-4 hover:shadow-md transition-all duration-300">
                <div class="flex items-start gap-3">
                  <img src="https://ai-public.mastergo.com/ai/img_res/d7ba209ecc5e9cdcef693f83452122fa.jpg" alt="成员头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-green-500/20">
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                      <h4 class="font-semibold text-gray-900 truncate">王浩然</h4>
                      <span
                        class="shrink-0 px-2 py-0.5 text-[10px] font-medium bg-green-500/10 text-green-500 rounded-full">技术专家</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-2">前端架构师</p>
                    <div class="flex items-center gap-3">
                      <span class="text-xs text-gray-500">贡献值: <span
                          class="text-green-500 font-medium">2,486</span></span>
                      <span class="text-xs text-gray-500">文章: <span class="text-green-500 font-medium">46</span></span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="group bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-4 hover:shadow-md transition-all duration-300">
                <div class="flex items-start gap-3">
                  <img src="https://ai-public.mastergo.com/ai/img_res/e6c68925315091ace9079e3486b9ab84.jpg" alt="成员头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-green-500/20">
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                      <h4 class="font-semibold text-gray-900 truncate">林晓萱</h4>
                      <span
                        class="shrink-0 px-2 py-0.5 text-[10px] font-medium bg-purple-500/10 text-purple-500 rounded-full">UI专家</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-2">设计总监</p>
                    <div class="flex items-center gap-3">
                      <span class="text-xs text-gray-500">贡献值: <span
                          class="text-green-500 font-medium">2,156</span></span>
                      <span class="text-xs text-gray-500">文章: <span class="text-green-500 font-medium">38</span></span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="group bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-4 hover:shadow-md transition-all duration-300">
                <div class="flex items-start gap-3">
                  <img src="https://ai-public.mastergo.com/ai/img_res/a49596b490a070335e796affda42f867.jpg" alt="成员头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-green-500/20">
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                      <h4 class="font-semibold text-gray-900 truncate">张明睿</h4>
                      <span
                        class="shrink-0 px-2 py-0.5 text-[10px] font-medium bg-blue-500/10 text-blue-500 rounded-full">后端专家</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-2">架构师</p>
                    <div class="flex items-center gap-3">
                      <span class="text-xs text-gray-500">贡献值: <span
                          class="text-green-500 font-medium">1,986</span></span>
                      <span class="text-xs text-gray-500">文章: <span class="text-green-500 font-medium">32</span></span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="group bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-4 hover:shadow-md transition-all duration-300">
                <div class="flex items-start gap-3">
                  <img src="https://ai-public.mastergo.com/ai/img_res/2b4b4b57a887ee1802a3fb50d3650ce6.jpg" alt="成员头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-green-500/20">
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                      <h4 class="font-semibold text-gray-900 truncate">Emma Wilson</h4>
                      <span
                        class="shrink-0 px-2 py-0.5 text-[10px] font-medium bg-orange-500/10 text-orange-500 rounded-full">产品专家</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-2">产品总监</p>
                    <div class="flex items-center gap-3">
                      <span class="text-xs text-gray-500">贡献值: <span
                          class="text-green-500 font-medium">1,856</span></span>
                      <span class="text-xs text-gray-500">文章: <span class="text-green-500 font-medium">28</span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300">
          <div class="relative bg-gradient-to-br from-primary/5 to-secondary/5 p-6">
            <div class="flex items-center justify-between mb-6">
              <div>
                <div class="flex items-center gap-3 mb-2">
                  <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10">
                    <i class="fas fa-chart-line text-secondary"></i>
                  </span>
                  <div>
                    <h3 class="text-xl font-bold text-gray-900">本周热门</h3>
                    <p class="text-gray-500 text-sm">最受欢迎的技术话题</p>
                  </div>
                </div>
                <div class="flex items-center gap-4 mt-3">
                  <span class="flex items-center gap-1 text-sm text-gray-500">
                    <i class="fas fa-star text-yellow-400"></i>
                    本周精选 TOP 10
                  </span>
                  <span class="flex items-center gap-1 text-sm text-gray-500">
                    <i class="fas fa-eye text-secondary"></i>
                    累计阅读 12.8k
                  </span>
                </div>
              </div>
              <div class="flex flex-col items-end gap-2">
                <a href="#" class="group flex items-center text-secondary hover:text-secondary/80 transition-colors">
                  <span class="mr-2">查看更多</span>
                  <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                </a>
                <span class="px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full">
                  每周一更新
                </span>
              </div>
            </div>
            <div class="space-y-4">
              <div class="group bg-white rounded-xl p-4 hover:shadow-lg transition-all duration-300">
                <div class="flex items-start gap-4">
                  <div class="relative">
                    <span
                      class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-primary to-secondary text-white font-bold rounded-xl shadow-lg">1</span>
                    <div
                      class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center bg-green-500 text-white text-xs font-bold rounded-full">
                      <i class="fas fa-arrow-trend-up"></i>
                    </div>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center justify-between mb-2">
                      <h4 class="font-semibold text-gray-900">2024年前端开发者必备技能指南</h4>
                      <span class="text-xs text-white bg-primary px-2 py-1 rounded-full">精选</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">深入分析2024年前端开发领域的关键技术趋势，包括：Web Assembly的实际应用、Edge
                      Computing在前端的发展、AI 驱动的开发工具等热门话题。</p>
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4">
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-eye mr-1"></i>
                          4.2k
                        </span>
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-comment mr-1"></i>
                          216
                        </span>
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-heart mr-1"></i>
                          158
                        </span>
                      </div>
                      <div class="flex items-center space-x-2">
                        <span class="text-xs text-blue-500 bg-blue-50 px-2 py-1 rounded-full">趋势</span>
                        <span class="text-xs text-green-500 bg-green-50 px-2 py-1 rounded-full">技术前沿</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="group bg-white rounded-xl p-4 hover:shadow-lg transition-all duration-300">
                <div class="flex items-start gap-4">
                  <div class="relative">
                    <span
                      class="flex items-center justify-center w-12 h-12 bg-gray-100 text-gray-900 font-bold rounded-xl">2</span>
                    <div
                      class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center bg-orange-500 text-white text-xs font-bold rounded-full">
                      <i class="fas fa-fire"></i>
                    </div>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center justify-between mb-2">
                      <h4 class="font-semibold text-gray-900">React 性能优化实践指南</h4>
                      <span class="text-xs text-white bg-secondary px-2 py-1 rounded-full">热门</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">从实际项目经验出发，详细讲解 React
                      应用性能优化的各个环节，包括：组件拆分策略、状态管理优化、渲染性能提升等核心内容。</p>
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4">
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-eye mr-1"></i>
                          3.8k
                        </span>
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-comment mr-1"></i>
                          168
                        </span>
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-heart mr-1"></i>
                          142
                        </span>
                      </div>
                      <div class="flex items-center space-x-2">
                        <span class="text-xs text-purple-500 bg-purple-50 px-2 py-1 rounded-full">React</span>
                        <span class="text-xs text-orange-500 bg-orange-50 px-2 py-1 rounded-full">性能优化</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="group bg-white rounded-xl p-4 hover:shadow-lg transition-all duration-300">
                <div class="flex items-start gap-4">
                  <div class="relative">
                    <span
                      class="flex items-center justify-center w-12 h-12 bg-gray-100 text-gray-900 font-bold rounded-xl">3</span>
                    <div
                      class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center bg-blue-500 text-white text-xs font-bold rounded-full">
                      <i class="fas fa-star"></i>
                    </div>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center justify-between mb-2">
                      <h4 class="font-semibold text-gray-900">现代化设计系统构建指南</h4>
                      <span class="text-xs text-white bg-green-500 px-2 py-1 rounded-full">推荐</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">探讨如何构建一个可扩展的设计系统，涵盖设计标准制定、组件库开发、团队协作流程等多个维度的实践经验。
                    </p>
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4">
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-eye mr-1"></i>
                          3.2k
                        </span>
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-comment mr-1"></i>
                          146
                        </span>
                        <span class="flex items-center text-sm text-gray-500">
                          <i class="far fa-heart mr-1"></i>
                          126
                        </span>
                      </div>
                      <div class="flex items-center space-x-2">
                        <span class="text-xs text-pink-500 bg-pink-50 px-2 py-1 rounded-full">设计系统</span>
                        <span class="text-xs text-indigo-500 bg-indigo-50 px-2 py-1 rounded-full">规范</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    <section class="py-24 bg-gradient-to-b from-gray-50 to-gray-100">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
          <span class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full font-medium mb-4">MY
            ACHIEVEMENTS</span>
          <h2 class="text-4xl font-bold text-gray-900 mb-4">成长足迹</h2>
          <p class="text-gray-600 text-lg">记录创作历程的每一个精彩瞬间，感谢一路相伴的你</p>
        </div>
        <div class="grid grid-cols-4 gap-8">
          <div class="group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500">
            <div
              class="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-500">
            </div>
            <div class="relative">
              <div class="mb-6">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-primary to-primary/80 rounded-2xl flex items-center justify-center transform -rotate-12 group-hover:rotate-0 transition-transform duration-500">
                  <i class="fas fa-file-alt text-white text-2xl"></i>
                </div>
              </div>
              <div>
                <div class="flex items-end gap-2 mb-1">
                  <h3
                    class="text-5xl font-bold bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
                    62</h3>
                  <span class="text-xl text-gray-400 mb-1">篇</span>
                </div>
                <p class="text-gray-600 font-medium mb-4">发表文章总数</p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span
                      class="flex items-center text-green-500 font-medium px-2 py-1 bg-green-50 rounded-full text-sm">
                      <i class="fas fa-arrow-up mr-1"></i>
                      12%
                    </span>
                    <span class="text-gray-500">较上月</span>
                  </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <p class="text-gray-500 text-sm mb-1">技术文章</p>
                      <p class="font-semibold text-gray-900">38 篇</p>
                    </div>
                    <div>
                      <p class="text-gray-500 text-sm mb-1">设计分享</p>
                      <p class="font-semibold text-gray-900">24 篇</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500">
            <div
              class="absolute inset-0 bg-gradient-to-br from-secondary/5 to-secondary/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-500">
            </div>
            <div class="relative">
              <div class="mb-6">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-secondary to-secondary/80 rounded-2xl flex items-center justify-center transform -rotate-12 group-hover:rotate-0 transition-transform duration-500">
                  <i class="fas fa-eye text-white text-2xl"></i>
                </div>
              </div>
              <div>
                <div class="flex items-end gap-2 mb-1">
                  <h3
                    class="text-5xl font-bold bg-gradient-to-r from-secondary to-secondary/80 bg-clip-text text-transparent">
                    15.8K</h3>
                  <span class="text-xl text-gray-400 mb-1">次</span>
                </div>
                <p class="text-gray-600 font-medium mb-4">累计阅读量</p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span
                      class="flex items-center text-green-500 font-medium px-2 py-1 bg-green-50 rounded-full text-sm">
                      <i class="fas fa-arrow-up mr-1"></i>
                      8%
                    </span>
                    <span class="text-gray-500">较上月</span>
                  </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <p class="text-gray-500 text-sm mb-1">人均阅读</p>
                      <p class="font-semibold text-gray-900">3.2 篇</p>
                    </div>
                    <div>
                      <p class="text-gray-500 text-sm mb-1">月度增长</p>
                      <p class="font-semibold text-gray-900">1.2K</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500">
            <div
              class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-green-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-500">
            </div>
            <div class="relative">
              <div class="mb-6">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-500/80 rounded-2xl flex items-center justify-center transform -rotate-12 group-hover:rotate-0 transition-transform duration-500">
                  <i class="fas fa-comments text-white text-2xl"></i>
                </div>
              </div>
              <div>
                <div class="flex items-end gap-2 mb-1">
                  <h3
                    class="text-5xl font-bold bg-gradient-to-r from-green-500 to-green-500/80 bg-clip-text text-transparent">
                    386</h3>
                  <span class="text-xl text-gray-400 mb-1">条</span>
                </div>
                <p class="text-gray-600 font-medium mb-4">读者互动评论</p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span
                      class="flex items-center text-green-500 font-medium px-2 py-1 bg-green-50 rounded-full text-sm">
                      <i class="fas fa-arrow-up mr-1"></i>
                      15%
                    </span>
                    <span class="text-gray-500">较上月</span>
                  </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <p class="text-gray-500 text-sm mb-1">有效回复</p>
                      <p class="font-semibold text-gray-900">92%</p>
                    </div>
                    <div>
                      <p class="text-gray-500 text-sm mb-1">月度活跃</p>
                      <p class="font-semibold text-gray-900">85 人</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500">
            <div
              class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-yellow-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-500">
            </div>
            <div class="relative">
              <div class="mb-6">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-yellow-500/80 rounded-2xl flex items-center justify-center transform -rotate-12 group-hover:rotate-0 transition-transform duration-500">
                  <i class="fas fa-star text-white text-2xl"></i>
                </div>
              </div>
              <div>
                <div class="flex items-end gap-2 mb-1">
                  <h3
                    class="text-5xl font-bold bg-gradient-to-r from-yellow-500 to-yellow-500/80 bg-clip-text text-transparent">
                    245</h3>
                  <span class="text-xl text-gray-400 mb-1">次</span>
                </div>
                <p class="text-gray-600 font-medium mb-4">文章被收藏</p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span
                      class="flex items-center text-green-500 font-medium px-2 py-1 bg-green-50 rounded-full text-sm">
                      <i class="fas fa-arrow-up mr-1"></i>
                      6%
                    </span>
                    <span class="text-gray-500">较上月</span>
                  </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <p class="text-gray-500 text-sm mb-1">高质量文章</p>
                      <p class="font-semibold text-gray-900">48 篇</p>
                    </div>
                    <div>
                      <p class="text-gray-500 text-sm mb-1">月度增长</p>
                      <p class="font-semibold text-gray-900">32 次</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="py-16 bg-gradient-to-b from-white to-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-12">
          <span class="text-primary font-medium">FEATURED POSTS</span>
          <h2 class="text-3xl font-bold text-gray-900 mt-2 mb-4">热门推荐</h2>
          <p class="text-gray-400">精选最受欢迎的技术文章和经验分享</p>
        </div>
        <div class="grid grid-cols-3 gap-8">
          <div
            class="group relative bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-500">
            <div class="relative h-[220px] overflow-hidden">
              <img src="https://ai-public.mastergo.com/ai/img_res/1708724a2b7686c14674e6a3413163c0.jpg" alt="推荐文章配图"
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
              <div class="absolute top-4 right-4">
                <span
                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/90 text-white backdrop-blur-md">
                  <i class="fas fa-fire mr-1"></i>热门
                </span>
              </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
              <div class="flex items-center space-x-2 mb-3">
                <span class="px-2 py-1 rounded-full text-xs bg-white/20 backdrop-blur-sm">Web 前端</span>
                <span class="px-2 py-1 rounded-full text-xs bg-white/20 backdrop-blur-sm">技术趋势</span>
              </div>
              <h3 class="text-xl font-bold mb-2 group-hover:text-primary transition-colors">2024 前端技术趋势展望</h3>
              <p class="text-sm text-gray-200 mb-4 line-clamp-2">深入分析 2024 年前端开发领域的主要技术趋势，包括框架演进、构建工具、性能优化等多个方面。</p>
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center text-sm">
                    <i class="far fa-eye mr-1"></i>2.5k
                  </span>
                  <span class="flex items-center text-sm">
                    <i class="far fa-comment mr-1"></i>48
                  </span>
                  <span class="flex items-center text-sm">
                    <i class="far fa-heart mr-1"></i>126
                  </span>
                </div>
                <div
                  class="transform translate-x-8 group-hover:translate-x-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
                  <button class="flex items-center space-x-1 text-white hover:text-primary transition-colors">
                    <span>阅读更多</span>
                    <i class="fas fa-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="group relative bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-500">
            <div class="relative h-[220px] overflow-hidden">
              <img src="https://ai-public.mastergo.com/ai/img_res/926f7060ff2795859416911e1a90e83a.jpg" alt="推荐文章配图"
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
              <div class="absolute top-4 right-4">
                <span
                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-secondary/90 text-white backdrop-blur-md">
                  <i class="fas fa-star mr-1"></i>精选
                </span>
              </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
              <div class="flex items-center space-x-2 mb-3">
                <span class="px-2 py-1 rounded-full text-xs bg-white/20 backdrop-blur-sm">设计系统</span>
                <span class="px-2 py-1 rounded-full text-xs bg-white/20 backdrop-blur-sm">组件库</span>
              </div>
              <h3 class="text-xl font-bold mb-2 group-hover:text-secondary transition-colors">设计系统搭建实战</h3>
              <p class="text-sm text-gray-200 mb-4 line-clamp-2">详细介绍如何从零开始搭建一个完整的设计系统，包括组件库设计、样式指南和设计规范。</p>
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center text-sm">
                    <i class="far fa-eye mr-1"></i>1.8k
                  </span>
                  <span class="flex items-center text-sm">
                    <i class="far fa-comment mr-1"></i>36
                  </span>
                  <span class="flex items-center text-sm">
                    <i class="far fa-heart mr-1"></i>98
                  </span>
                </div>
                <div
                  class="transform translate-x-8 group-hover:translate-x-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
                  <button class="flex items-center space-x-1 text-white hover:text-secondary transition-colors">
                    <span>阅读更多</span>
                    <i class="fas fa-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="group relative bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-500">
            <div class="relative h-[220px] overflow-hidden">
              <img src="https://ai-public.mastergo.com/ai/img_res/554a9c771372e7e7d26a65959e18af38.jpg" alt="推荐文章配图"
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
              <div class="absolute top-4 right-4">
                <span
                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-500/90 text-white backdrop-blur-md">
                  <i class="fas fa-chart-line mr-1"></i>趋势
                </span>
              </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
              <div class="flex items-center space-x-2 mb-3">
                <span class="px-2 py-1 rounded-full text-xs bg-white/20 backdrop-blur-sm">团队协作</span>
                <span class="px-2 py-1 rounded-full text-xs bg-white/20 backdrop-blur-sm">效率提升</span>
              </div>
              <h3 class="text-xl font-bold mb-2 group-hover:text-green-500 transition-colors">团队协作效率提升指南</h3>
              <p class="text-sm text-gray-200 mb-4 line-clamp-2">分享一套完整的团队协作方法论，结合实用工具推荐，全方位提升团队开发效率。</p>
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center text-sm">
                    <i class="far fa-eye mr-1"></i>1.6k
                  </span>
                  <span class="flex items-center text-sm">
                    <i class="far fa-comment mr-1"></i>32
                  </span>
                  <span class="flex items-center text-sm">
                    <i class="far fa-heart mr-1"></i>86
                  </span>
                </div>
                <div
                  class="transform translate-x-8 group-hover:translate-x-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
                  <button class="flex items-center space-x-1 text-white hover:text-green-500 transition-colors">
                    <span>阅读更多</span>
                    <i class="fas fa-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
    </section>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <div class="flex gap-8">
        <div class="w-3/4">
          <div class="flex items-center justify-between mb-12">
            <div>
              <span class="text-primary font-medium tracking-wider">LATEST POSTS</span>
              <h2 class="text-4xl font-bold text-gray-900 mt-2">最新文章</h2>
              <p class="text-gray-500 mt-2 max-w-lg">分享最新的技术见解、设计思考和实践心得</p>
            </div>
            <div class="flex gap-4">
              <div class="relative">
                <input type="text" placeholder="搜索文章..."
                  class="w-[300px] pl-12 pr-4 py-3 bg-gray-50 border-none rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-300">
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                <div class="absolute right-3 top-1/2 -translate-y-1/2 flex gap-2">
                  <button
                    class="w-8 h-8 flex items-center justify-center rounded-lg bg-white shadow-sm hover:bg-gray-50 text-gray-600">
                    <i class="fas fa-th-large"></i>
                  </button>
                  <button
                    class="w-8 h-8 flex items-center justify-center rounded-lg bg-white shadow-sm hover:bg-gray-50 text-gray-600">
                    <i class="fas fa-list"></i>
                  </button>
                </div>
              </div>
              <button
                class="bg-primary text-white px-6 py-2 !rounded-xl hover:bg-primary/90 transition-colors whitespace-nowrap font-medium flex items-center gap-2">
                <i class="fas fa-pencil-alt"></i>
                写文章
              </button>
            </div>
          </div>
          <div class="grid gap-8">
            <div class="flex items-center gap-4 p-2 bg-gray-50/50 rounded-xl border border-gray-100">
              <button
                class="flex-1 py-2 px-4 bg-white text-primary shadow-sm !rounded-lg font-medium hover:shadow-md transition-shadow whitespace-nowrap">全部文章</button>
              <button
                class="flex-1 py-2 px-4 text-gray-600 hover:bg-white hover:shadow-sm !rounded-lg transition-all whitespace-nowrap">最新发布</button>
              <button
                class="flex-1 py-2 px-4 text-gray-600 hover:bg-white hover:shadow-sm !rounded-lg transition-all whitespace-nowrap">最多阅读</button>
              <button
                class="flex-1 py-2 px-4 text-gray-600 hover:bg-white hover:shadow-sm !rounded-lg transition-all whitespace-nowrap">我的收藏</button>
              <div class="relative group">
                <input type="file" id="fileUpload" class="hidden" accept=".md,.doc,.docx">
                <label for="fileUpload"
                  class="flex items-center px-4 py-2 text-gray-600 hover:bg-white hover:shadow-sm !rounded-lg transition-all whitespace-nowrap cursor-pointer">
                  <i class="fas fa-cloud-upload-alt mr-2"></i>
                  上传文件
                </label>
                <div
                  class="absolute top-full left-0 mt-2 p-4 bg-white rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10 w-64">
                  <div class="flex items-start gap-3">
                    <div class="p-2 rounded-lg bg-primary/10">
                      <i class="fas fa-info-circle text-primary"></i>
                    </div>
                    <div>
                      <p class="font-medium text-gray-900 mb-2">支持的文件格式</p>
                      <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-primary/5 text-primary text-sm rounded-full">Markdown</span>
                        <span class="px-3 py-1 bg-primary/5 text-primary text-sm rounded-full">Word文档</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-1 gap-8">
            <article
              class="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-500">
              <div class="flex items-start">
                <div class="w-[320px] relative overflow-hidden">
                  <img src="https://ai-public.mastergo.com/ai/img_res/1c57ed6071630bae67941925f4262147.jpg" alt="文章配图"
                    class="w-full h-[320px] object-cover transform group-hover:scale-110 transition-transform duration-700">
                  <div
                    class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 opacity-0 group-hover:opacity-100 transition-all duration-500">
                  </div>
                </div>
                <div class="flex-1 p-8">
                  <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-3">
                      <img src="https://ai-public.mastergo.com/ai/img_res/e30d6cf9758342a486813f5b323f0e05.jpg"
                        alt="作者头像" class="w-10 h-10 rounded-full ring-2 ring-primary/20">
                      <div>
                        <h4 class="font-medium text-gray-900">陈思远</h4>
                        <p class="text-sm text-gray-500">全栈开发工程师</p>
                      </div>
                    </div>
                    <span class="text-sm text-gray-500">2024-01-15</span>
                  </div>
                  <div class="space-x-2 mb-4">
                    <span class="text-sm text-primary bg-primary/10 px-3 py-1 rounded-full">React</span>
                    <span class="text-sm text-secondary bg-secondary/10 px-3 py-1 rounded-full">前端开发</span>
                    <span class="text-sm text-green-500 bg-green-50 px-3 py-1 rounded-full">性能优化</span>
                  </div>
                  <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-primary transition-colors">深入理解
                    React 18 新特性与性能优化实践</h3>
                  <p class="text-gray-600 mb-6 line-clamp-2 min-h-[48px]">深入探讨 React 18 带来的重大更新，包括 Concurrent
                    渲染机制、Suspense 数据流、自动批处理等特性。结合实际项目案例，分享如何优化应用性能，提升用户体验。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                      <span class="flex items-center text-gray-500 hover:text-primary transition-colors cursor-pointer">
                        <i class="far fa-eye mr-2"></i>
                        <span>2,468 阅读</span>
                      </span>
                      <span class="flex items-center text-gray-500 hover:text-primary transition-colors cursor-pointer">
                        <i class="far fa-comment mr-2"></i>
                        <span>32 评论</span>
                      </span>
                      <span class="flex items-center text-gray-500 hover:text-primary transition-colors cursor-pointer">
                        <i class="far fa-heart mr-2"></i>
                        <span>186 喜欢</span>
                      </span>
                    </div>
                    <button
                      class="flex items-center text-primary opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300">
                      <span class="mr-2">阅读全文</span>
                      <i class="fas fa-arrow-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </article>
            <article
              class="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-500">
              <div class="flex items-start">
                <div class="w-[320px] relative overflow-hidden">
                  <img src="https://ai-public.mastergo.com/ai/img_res/69cc1566493152b27b05236e5da3f04f.jpg" alt="文章配图"
                    class="w-full h-[320px] object-cover transform group-hover:scale-110 transition-transform duration-700">
                  <div
                    class="absolute inset-0 bg-gradient-to-br from-secondary/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-all duration-500">
                  </div>
                </div>
                <div class="flex-1 p-8">
                  <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-3">
                      <img src="https://ai-public.mastergo.com/ai/img_res/148b7b1ddb1be8b32cc2e21cf3803105.jpg"
                        alt="作者头像" class="w-10 h-10 rounded-full ring-2 ring-secondary/20">
                      <div>
                        <h4 class="font-medium text-gray-900">林雨晴</h4>
                        <p class="text-sm text-gray-500">高级 UI 设计师</p>
                      </div>
                    </div>
                    <span class="text-sm text-gray-500">2024-01-12</span>
                  </div>
                  <div class="space-x-2 mb-4">
                    <span class="text-sm text-secondary bg-secondary/10 px-3 py-1 rounded-full">UI 设计</span>
                    <span class="text-sm text-purple-500 bg-purple-50 px-3 py-1 rounded-full">交互设计</span>
                    <span class="text-sm text-pink-500 bg-pink-50 px-3 py-1 rounded-full">用户体验</span>
                  </div>
                  <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-secondary transition-colors">
                    打造精致的微交互体验：设计原则与实践指南</h3>
                  <p class="text-gray-600 mb-6 line-clamp-3">
                    深入探讨如何设计富有创意且实用的微交互效果，从动效设计原则、用户心理学、技术实现等多个维度，为产品注入生命力。结合实际案例，分享微交互设计的最佳实践。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                      <span
                        class="flex items-center text-gray-500 hover:text-secondary transition-colors cursor-pointer">
                        <i class="far fa-eye mr-2"></i>
                        <span>1,846 阅读</span>
                      </span>
                      <span
                        class="flex items-center text-gray-500 hover:text-secondary transition-colors cursor-pointer">
                        <i class="far fa-comment mr-2"></i>
                        <span>28 评论</span>
                      </span>
                      <span
                        class="flex items-center text-gray-500 hover:text-secondary transition-colors cursor-pointer">
                        <i class="far fa-heart mr-2"></i>
                        <span>142 喜欢</span>
                      </span>
                    </div>
                    <button
                      class="flex items-center text-secondary opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300">
                      <span class="mr-2">阅读全文</span>
                      <i class="fas fa-arrow-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </article>
            <article
              class="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-500">
              <div class="flex items-start">
                <div class="w-[320px] relative overflow-hidden">
                  <img src="https://ai-public.mastergo.com/ai/img_res/7761d2564a635ffd2f9165e7a4e8d6ac.jpg" alt="文章配图"
                    class="w-full h-[320px] object-cover transform group-hover:scale-110 transition-transform duration-700">
                  <div
                    class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 opacity-0 group-hover:opacity-100 transition-all duration-500">
                  </div>
                </div>
                <div class="flex-1 p-8">
                  <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-3">
                      <img src="https://ai-public.mastergo.com/ai/img_res/e00ec68b9ae26f5a0972dc11a1d3589c.jpg"
                        alt="作者头像" class="w-10 h-10 rounded-full ring-2 ring-blue-500/20">
                      <div>
                        <h4 class="font-medium text-gray-900">张志远</h4>
                        <p class="text-sm text-gray-500">技术架构师</p>
                      </div>
                    </div>
                    <span class="text-sm text-gray-500">2024-01-10</span>
                  </div>
                  <div class="space-x-2 mb-4">
                    <span class="text-sm text-blue-500 bg-blue-50 px-3 py-1 rounded-full">TypeScript</span>
                    <span class="text-sm text-cyan-500 bg-cyan-50 px-3 py-1 rounded-full">类型系统</span>
                    <span class="text-sm text-indigo-500 bg-indigo-50 px-3 py-1 rounded-full">最佳实践</span>
                  </div>
                  <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-blue-500 transition-colors">
                    TypeScript 高级类型进阶：从理论到实战</h3>
                  <p class="text-gray-600 mb-6 line-clamp-3">深入探讨 TypeScript
                    类型系统的高级特性，包括条件类型、映射类型、联合类型等核心概念。结合真实项目经验，分享类型设计的最佳实践和常见陷阱的解决方案。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                      <span
                        class="flex items-center text-gray-500 hover:text-blue-500 transition-colors cursor-pointer">
                        <i class="far fa-eye mr-2"></i>
                        <span>2,156 阅读</span>
                      </span>
                      <span
                        class="flex items-center text-gray-500 hover:text-blue-500 transition-colors cursor-pointer">
                        <i class="far fa-comment mr-2"></i>
                        <span>42 评论</span>
                      </span>
                      <span
                        class="flex items-center text-gray-500 hover:text-blue-500 transition-colors cursor-pointer">
                        <i class="far fa-heart mr-2"></i>
                        <span>168 喜欢</span>
                      </span>
                    </div>
                    <button
                      class="flex items-center text-blue-500 opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300">
                      <span class="mr-2">阅读全文</span>
                      <i class="fas fa-arrow-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </article>
            <article
              class="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-500">
              <div class="flex items-start">
                <div class="w-[320px] relative overflow-hidden">
                  <img src="https://ai-public.mastergo.com/ai/img_res/361c6fdd723bbb88b45905065fbb4c25.jpg" alt="文章配图"
                    class="w-full h-[320px] object-cover transform group-hover:scale-110 transition-transform duration-700">
                  <div
                    class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-teal-500/20 opacity-0 group-hover:opacity-100 transition-all duration-500">
                  </div>
                </div>
                <div class="flex-1 p-8">
                  <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-3">
                      <img src="https://ai-public.mastergo.com/ai/img_res/30044c8d4a512d47e1fec725350dfd08.jpg"
                        alt="作者头像" class="w-10 h-10 rounded-full ring-2 ring-green-500/20">
                      <div>
                        <h4 class="font-medium text-gray-900">Sarah Johnson</h4>
                        <p class="text-sm text-gray-500">开发效率专家</p>
                      </div>
                    </div>
                    <span class="text-sm text-gray-500">2024-01-08</span>
                  </div>
                  <div class="space-x-2 mb-4">
                    <span class="text-sm text-green-500 bg-green-50 px-3 py-1 rounded-full">效率工具</span>
                    <span class="text-sm text-teal-500 bg-teal-50 px-3 py-1 rounded-full">工作流程</span>
                    <span class="text-sm text-emerald-500 bg-emerald-50 px-3 py-1 rounded-full">团队协作</span>
                  </div>
                  <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-green-500 transition-colors">10
                    个revolucionario开发效率工具与最佳实践</h3>
                  <p class="text-gray-600 mb-6 line-clamp-3">精选 10
                    个显著提升开发效率的现代化工具，涵盖代码编写、调试、版本控制、团队协作等环节。深入分析各工具的特点与使用场景，助你打造高效的开发工作流。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                      <span
                        class="flex items-center text-gray-500 hover:text-green-500 transition-colors cursor-pointer">
                        <i class="far fa-eye mr-2"></i>
                        <span>1,924 阅读</span>
                      </span>
                      <span
                        class="flex items-center text-gray-500 hover:text-green-500 transition-colors cursor-pointer">
                        <i class="far fa-comment mr-2"></i>
                        <span>36 评论</span>
                      </span>
                      <span
                        class="flex items-center text-gray-500 hover:text-green-500 transition-colors cursor-pointer">
                        <i class="far fa-heart mr-2"></i>
                        <span>156 喜欢</span>
                      </span>
                    </div>
                    <button
                      class="flex items-center text-green-500 opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300">
                      <span class="mr-2">阅读全文</span>
                      <i class="fas fa-arrow-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
        <div class="w-1/4">
          <div class="sticky top-[88px] space-y-8">
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
              <div class="p-6">
                <div class="flex items-center gap-4 mb-6">
                  <div class="relative">
                    <img src="https://ai-public.mastergo.com/ai/img_res/e64aa2e0c4301119e38b1d5c6f502092.jpg" alt="博主头像"
                      class="w-16 h-16 rounded-xl ring-2 ring-primary/10">
                    <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full ring-2 ring-white"></div>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                      <h3 class="text-lg font-bold text-gray-900">陈思远</h3>
                      <span class="px-2 py-0.5 text-xs font-medium text-primary bg-primary/10 rounded-full">认证开发者</span>
                    </div>
                    <p class="text-sm text-gray-500">全栈开发者 / UI 设计师</p>
                  </div>
                </div>
                <div class="grid grid-cols-4 gap-2 p-3 bg-gray-50 rounded-xl mb-4">
                  <div class="text-center">
                    <p class="font-bold text-gray-900">168</p>
                    <p class="text-xs text-gray-500">文章</p>
                  </div>
                  <div class="text-center">
                    <p class="font-bold text-gray-900">12.5k</p>
                    <p class="text-xs text-gray-500">阅读</p>
                  </div>
                  <div class="text-center">
                    <p class="font-bold text-gray-900">2.8k</p>
                    <p class="text-xs text-gray-500">粉丝</p>
                  </div>
                  <div class="text-center">
                    <p class="font-bold text-gray-900">156</p>
                    <p class="text-xs text-gray-500">代码</p>
                  </div>
                </div>
                <div class="flex gap-2 mb-4">
                  <button
                    class="flex-1 px-4 py-2 text-white bg-primary !rounded-button hover:bg-primary/90 transition-colors text-sm font-medium">
                    关注
                  </button>
                  <button
                    class="flex-1 px-4 py-2 text-gray-600 bg-gray-100 !rounded-button hover:bg-gray-200 transition-colors text-sm font-medium">
                    私信
                  </button>
                </div>
                <div class="flex flex-wrap gap-2 mb-4">
                  <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs">React</span>
                  <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-xs">TypeScript</span>
                  <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full text-xs">UI/UX</span>
                  <span class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-xs">Node.js</span>
                </div>
                <a href="#"
                  class="flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 text-white !rounded-button hover:bg-gray-800 transition-colors text-sm font-medium">
                  <i class="fab fa-github"></i>
                  <span>GitHub</span>
                </a>
              </div>
            </div>
            <div class="bg-white rounded-2xl shadow p-6">
              <div class="flex items-center justify-between mb-6">
                <h3 class="font-bold text-gray-900">活跃访客</h3>
                <a href="#" class="text-primary hover:text-primary/80 text-sm">更多</a>
              </div>
              <div class="flex flex-wrap gap-3 mb-8">
                <div class="group relative">
                  <img src="https://ai-public.mastergo.com/ai/img_res/c9bbd0967605a488fbf83a981615e2dc.jpg" alt="访客头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-transparent group-hover:ring-primary/20 transition-all">
                  <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 ring-2 ring-white rounded-full"></span>
                </div>
                <div class="group relative">
                  <img src="https://ai-public.mastergo.com/ai/img_res/4362a4c632859ba9c936f45410b44f55.jpg" alt="访客头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-transparent group-hover:ring-primary/20 transition-all">
                  <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 ring-2 ring-white rounded-full"></span>
                </div>
                <div class="group relative">
                  <img src="https://ai-public.mastergo.com/ai/img_res/8a94a3ee1c3405d7b335b84390f9fdbd.jpg" alt="访客头像"
                    class="w-12 h-12 rounded-xl ring-2 ring-transparent group-hover:ring-primary/20 transition-all">
                  <span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-300 ring-2 ring-white rounded-full"></span>
                </div>
              </div>
              <div class="border-t border-gray-100 pt-6">
                <div class="flex items-center justify-between mb-6">
                  <h3 class="font-bold text-gray-900">文章分类</h3>
                  <a href="#" class="text-primary hover:text-primary/80 text-sm">全部</a>
                </div>
                <div class="grid grid-cols-2 gap-3">
                  <a href="#"
                    class="flex items-center gap-3 p-3 rounded-xl bg-gray-50 hover:bg-primary/5 transition-colors group">
                    <span class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary/10 text-primary">
                      <i class="fas fa-code"></i>
                    </span>
                    <div>
                      <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">技术</p>
                      <p class="text-xs text-gray-500">24 篇</p>
                    </div>
                  </a>
                  <a href="#"
                    class="flex items-center gap-3 p-3 rounded-xl bg-gray-50 hover:bg-secondary/5 transition-colors group">
                    <span class="w-10 h-10 flex items-center justify-center rounded-lg bg-secondary/10 text-secondary">
                      <i class="fas fa-paint-brush"></i>
                    </span>
                    <div>
                      <p class="font-medium text-gray-900 group-hover:text-secondary transition-colors">设计</p>
                      <p class="text-xs text-gray-500">18 篇</p>
                    </div>
                  </a>
                  <a href="#"
                    class="flex items-center gap-3 p-3 rounded-xl bg-gray-50 hover:bg-green-500/5 transition-colors group">
                    <span class="w-10 h-10 flex items-center justify-center rounded-lg bg-green-500/10 text-green-500">
                      <i class="fas fa-rocket"></i>
                    </span>
                    <div>
                      <p class="font-medium text-gray-900 group-hover:text-green-500 transition-colors">效率</p>
                      <p class="text-xs text-gray-500">12 篇</p>
                    </div>
                  </a>
                  <a href="#"
                    class="flex items-center gap-3 p-3 rounded-xl bg-gray-50 hover:bg-orange-500/5 transition-colors group">
                    <span
                      class="w-10 h-10 flex items-center justify-center rounded-lg bg-orange-500/10 text-orange-500">
                      <i class="fas fa-lightbulb"></i>
                    </span>
                    <div>
                      <p class="font-medium text-gray-900 group-hover:text-orange-500 transition-colors">经验</p>
                      <p class="text-xs text-gray-500">8 篇</p>
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="bg-white rounded-2xl shadow-lg p-6">
              <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-bold text-gray-900">热门标签</h3>
                <button class="text-primary hover:text-primary/80 text-sm font-medium">查看更多</button>
              </div>
              <div class="grid grid-cols-3 gap-3">
                <a href="#"
                  class="group relative flex flex-col items-center justify-center p-4 rounded-xl border border-gray-100 hover:border-primary/20 hover:shadow-lg hover:shadow-primary/5 transition-all duration-300">
                  <div
                    class="w-12 h-12 flex items-center justify-center rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 text-primary mb-3 group-hover:scale-110 transition-transform duration-300">
                    <i class="fab fa-react text-2xl"></i>
                  </div>
                  <span
                    class="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors">React</span>
                  <span class="text-xs text-gray-500 mt-1">128 篇</span>
                  <div class="absolute -top-2 -right-2">
                    <span
                      class="flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-primary rounded-full shadow-lg shadow-primary/20">1</span>
                  </div>
                </a>
                <a href="#"
                  class="group relative flex flex-col items-center justify-center p-4 rounded-xl border border-gray-100 hover:border-blue-500/20 hover:shadow-lg hover:shadow-blue-500/5 transition-all duration-300">
                  <div
                    class="w-12 h-12 flex items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500/10 to-blue-500/5 text-blue-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                    <i class="fab fa-vuejs text-2xl"></i>
                  </div>
                  <span
                    class="text-sm font-medium text-gray-900 group-hover:text-blue-500 transition-colors">Vue.js</span>
                  <span class="text-xs text-gray-500 mt-1">96 篇</span>
                  <div class="absolute -top-2 -right-2">
                    <span
                      class="flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-blue-500 rounded-full shadow-lg shadow-blue-500/20">2</span>
                  </div>
                </a>
                <a href="#"
                  class="group relative flex flex-col items-center justify-center p-4 rounded-xl border border-gray-100 hover:border-purple-500/20 hover:shadow-lg hover:shadow-purple-500/5 transition-all duration-300">
                  <div
                    class="w-12 h-12 flex items-center justify-center rounded-2xl bg-gradient-to-br from-purple-500/10 to-purple-500/5 text-purple-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                    <i class="fab fa-figma text-2xl"></i>
                  </div>
                  <span
                    class="text-sm font-medium text-gray-900 group-hover:text-purple-500 transition-colors">设计</span>
                  <span class="text-xs text-gray-500 mt-1">84 篇</span>
                  <div class="absolute -top-2 -right-2">
                    <span
                      class="flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-purple-500 rounded-full shadow-lg shadow-purple-500/20">3</span>
                  </div>
                </a>
                <a href="#"
                  class="group relative flex flex-col items-center justify-center p-4 rounded-xl border border-gray-100 hover:border-green-500/20 hover:shadow-lg hover:shadow-green-500/5 transition-all duration-300">
                  <div
                    class="w-12 h-12 flex items-center justify-center rounded-2xl bg-gradient-to-br from-green-500/10 to-green-500/5 text-green-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                    <i class="fas fa-mobile-alt text-2xl"></i>
                  </div>
                  <span
                    class="text-sm font-medium text-gray-900 group-hover:text-green-500 transition-colors">移动端</span>
                  <span class="text-xs text-gray-500 mt-1">76 篇</span>
                </a>
                <a href="#"
                  class="group relative flex flex-col items-center justify-center p-4 rounded-xl border border-gray-100 hover:border-orange-500/20 hover:shadow-lg hover:shadow-orange-500/5 transition-all duration-300">
                  <div
                    class="w-12 h-12 flex items-center justify-center rounded-2xl bg-gradient-to-br from-orange-500/10 to-orange-500/5 text-orange-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                    <i class="fas fa-layer-group text-2xl"></i>
                  </div>
                  <span
                    class="text-sm font-medium text-gray-900 group-hover:text-orange-500 transition-colors">架构</span>
                  <span class="text-xs text-gray-500 mt-1">68 篇</span>
                </a>
                <a href="#"
                  class="group relative flex flex-col items-center justify-center p-4 rounded-xl border border-gray-100 hover:border-teal-500/20 hover:shadow-lg hover:shadow-teal-500/5 transition-all duration-300">
                  <div
                    class="w-12 h-12 flex items-center justify-center rounded-2xl bg-gradient-to-br from-teal-500/10 to-teal-500/5 text-teal-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                    <i class="fas fa-tools text-2xl"></i>
                  </div>
                  <span class="text-sm font-medium text-gray-900 group-hover:text-teal-500 transition-colors">效率</span>
                  <span class="text-xs text-gray-500 mt-1">52 篇</span>
                </a>
              </div>
            </div>
            <div class="bg-white rounded-2xl shadow-lg p-6">
              <div class="flex items-center justify-between mb-6">
                <div>
                  <h3 class="text-xl font-bold text-gray-900 mb-1">精选好课</h3>
                  <p class="text-sm text-gray-500">为你精选技术提升课程</p>
                </div>
                <a href="#" class="text-sm text-primary hover:text-primary/80 flex items-center gap-1">
                  查看全部
                  <i class="fas fa-chevron-right text-xs"></i>
                </a>
              </div>
              <div class="space-y-3">
                <a href="#" class="group block p-4 rounded-xl transition-all duration-300 hover:bg-gray-50">
                  <div class="flex items-center gap-3">
                    <div class="relative shrink-0">
                      <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
                        <i class="fab fa-react text-xl text-primary"></i>
                      </div>
                      <div class="absolute -top-1 -right-1">
                        <span
                          class="flex items-center justify-center w-4 h-4 text-[10px] font-bold text-white bg-primary rounded-full">1</span>
                      </div>
                    </div>
                    <div class="min-w-0 flex-1">
                      <div class="flex items-center justify-between mb-1">
                        <h4 class="font-medium text-gray-900 truncate">React 高级进阶实战</h4>
                        <span class="text-primary text-sm font-medium">¥299</span>
                      </div>
                      <p class="text-xs text-gray-500">4.9 分 · 1,268 学员</p>
                    </div>
                  </div>
                </a>
                <a href="#" class="group block p-4 rounded-xl transition-all duration-300 hover:bg-gray-50">
                  <div class="flex items-center gap-3">
                    <div class="relative shrink-0">
                      <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center">
                        <i class="fas fa-paint-brush text-xl text-secondary"></i>
                      </div>
                      <div class="absolute -top-1 -right-1">
                        <span
                          class="flex items-center justify-center w-4 h-4 text-[10px] font-bold text-white bg-secondary rounded-full">2</span>
                      </div>
                    </div>
                    <div class="min-w-0 flex-1">
                      <div class="flex items-center justify-between mb-1">
                        <h4 class="font-medium text-gray-900 truncate">UI 设计进阶指南</h4>
                        <span class="text-secondary text-sm font-medium">¥199</span>
                      </div>
                      <p class="text-xs text-gray-500">4.8 分 · 986 学员</p>
                    </div>
                  </div>
                </a>
                <a href="#" class="group block p-4 rounded-xl transition-all duration-300 hover:bg-gray-50">
                  <div class="flex items-center gap-3">
                    <div class="relative shrink-0">
                      <div class="w-12 h-12 rounded-lg bg-green-500/10 flex items-center justify-center">
                        <i class="fas fa-rocket text-xl text-green-500"></i>
                      </div>
                      <div class="absolute -top-1 -right-1">
                        <span
                          class="flex items-center justify-center w-4 h-4 text-[10px] font-bold text-white bg-green-500 rounded-full">3</span>
                      </div>
                    </div>
                    <div class="min-w-0 flex-1">
                      <div class="flex items-center justify-between mb-1">
                        <h4 class="font-medium text-gray-900 truncate">效率提升特训营</h4>
                        <span class="text-green-500 text-sm font-medium">¥159</span>
                      </div>
                      <p class="text-xs text-gray-500">4.7 分 · 742 学员</p>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
  </main>
  <footer class="bg-white border-t border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <div class="grid grid-cols-12 gap-8 mb-12">
        <div class="col-span-4">
          <span class="text-3xl font-['Pacifico'] text-primary block mb-4">logo</span>
          <p class="text-gray-600 mb-6 leading-relaxed">分享技术与创意，探索数字世界的无限可能。让我们一起追求卓越，创造价值。</p>
          <div class="flex items-center gap-3">
            <a href="#"
              class="group w-10 h-10 flex items-center justify-center rounded-lg bg-gray-50 hover:bg-primary text-gray-400 hover:text-white transition-all duration-300">
              <i class="fab fa-github text-lg"></i>
            </a>
            <a href="#"
              class="group w-10 h-10 flex items-center justify-center rounded-lg bg-gray-50 hover:bg-primary text-gray-400 hover:text-white transition-all duration-300">
              <i class="fab fa-twitter text-lg"></i>
            </a>
            <a href="#"
              class="group w-10 h-10 flex items-center justify-center rounded-lg bg-gray-50 hover:bg-primary text-gray-400 hover:text-white transition-all duration-300">
              <i class="fab fa-linkedin text-lg"></i>
            </a>
          </div>
        </div>
        <div class="col-span-2">
          <h4 class="text-base font-semibold text-gray-900 mb-4">导航</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">首页</a></li>
            <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">文章</a></li>
            <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">分类</a></li>
            <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">教程</a></li>
            <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">社区</a></li>
            <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">关于我</a></li>
          </ul>
        </div>
        <div class="col-span-3">
          <h4 class="text-base font-semibold text-gray-900 mb-4">技术栈</h4>
          <div class="flex flex-wrap gap-2">
            <span
              class="px-3 py-1.5 bg-gray-50 text-gray-600 rounded-md text-sm hover:bg-primary/5 hover:text-primary transition-colors">React</span>
            <span
              class="px-3 py-1.5 bg-gray-50 text-gray-600 rounded-md text-sm hover:bg-primary/5 hover:text-primary transition-colors">Vue.js</span>
            <span
              class="px-3 py-1.5 bg-gray-50 text-gray-600 rounded-md text-sm hover:bg-primary/5 hover:text-primary transition-colors">Node.js</span>
            <span
              class="px-3 py-1.5 bg-gray-50 text-gray-600 rounded-md text-sm hover:bg-primary/5 hover:text-primary transition-colors">TypeScript</span>
            <span
              class="px-3 py-1.5 bg-gray-50 text-gray-600 rounded-md text-sm hover:bg-primary/5 hover:text-primary transition-colors">UI
              设计</span>
            <span
              class="px-3 py-1.5 bg-gray-50 text-gray-600 rounded-md text-sm hover:bg-primary/5 hover:text-primary transition-colors">微前端</span>
          </div>
        </div>
        <div class="col-span-3">
          <h4 class="text-base font-semibold text-gray-900 mb-4">订阅更新</h4>
          <p class="text-gray-500 text-sm mb-4">第一时间获取最新文章和资源信息</p>
          <div class="flex gap-2">
            <div class="relative flex-1">
              <input type="email" placeholder="输入邮箱地址"
                class="w-full px-4 py-2 bg-gray-50 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all text-sm">
            </div>
            <button
              class="shrink-0 bg-primary text-white px-6 py-2 !rounded-lg hover:bg-primary/90 transition-colors text-sm">
              订阅
            </button>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between py-6 border-t border-gray-100">
        <div class="text-gray-500 text-sm">© 2024 <span class="text-primary font-medium">个人博客</span>. All rights
          reserved.</div>
        <div class="flex items-center gap-6 text-sm">
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">联系我们</a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">隐私政策</a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">服务条款</a>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>